<template>
  <div id="app">
    <h2>我是网站标题</h2>
    <!--<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签-->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/' + userId">用户</router-link>
    <router-link :to="{path: '/profile', query: {name: 'miranda', age: 18, height: 1.88}}">档案</router-link>
    <!--<button @click="userClick">用户</button>-->
    <!--<button @click="profileClick">档案</button>-->

    <!--tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个<button>元素，而不是<a>元素-->
    <!--<router-link to="/home" tag="button">首页</router-link>-->
    <!--<router-link to="/about" tag="button">关于</router-link>-->

    <!--replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中-->
    <!--<router-link to="/home" replace>首页</router-link>-->
    <!--<router-link to="/about" replace>关于</router-link>-->

    <!--当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称-->
    <!--<router-link to="/home" active-class="active">首页</router-link>-->
    <!--<router-link to="/about" active-class="active">关于</router-link>-->

    <!--<router-view>：该标签会根据当前的路径，动态渲染出不同的组件，在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变-->
    <keep-alive exclude="Profile,User">
      <router-view/>
    </keep-alive>
    <h2>我是底部版权信息</h2>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 100
    }
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId);
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'miranda',
          age: 18,
          height: 1.88
        }
      });
    }
  }
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>

<!-- URL: 协议://主机:端口/路径?查询 -->
<!-- RUL：scheme://host:port/path?query -->
